<template>
	<div id="app">
	    <div style="margin-top: 15px;">
	        <el-input @input="monitorContent" placeholder="请输入内容" v-model="input" class="input-with-select" style="width: 500px">
	            <el-select v-model="select" slot="prepend" placeholder="请选择">
	                <el-option label="姓名" value="1"></el-option>
	            </el-select>
	            <el-button @click="fuzzySearch" slot="append" icon="el-icon-search" style="background-color: lightgoldenrodyellow"></el-button>
	        </el-input>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<!--        添加一条新记录-->
	        <el-button type="primary" icon="el-icon-edit" @click="ofOpenAdd" plain >新增</el-button>
	        <!-- 点击弹框-->
	        <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
	            <el-form  :model="customer" label-width="80px"> 
	                <el-form-item label="客户名称:">
	                    <el-input v-model="customer.name"></el-input>
	                </el-form-item>
					<el-form-item label="联系人:">
					    <el-input v-model="customer.contact"></el-input>
					</el-form-item>
					<el-form-item label="联系电话:">
					    <el-input v-model="customer.number"></el-input>
					</el-form-item>
					<el-form-item label="联系地址:">
					    <el-input v-model="customer.address"></el-input>
					</el-form-item>
					<el-form-item label="备注:">
					    <el-input v-model="customer.remarks"></el-input>
					</el-form-item>
	            </el-form>
	            <span slot="footer" class="dialog-footer">
	        <el-button @click="dialogVisible = false">取 消</el-button>、
	        <el-button type="primary" @click="openAdd">确 定</el-button>
	      </span>
	        </el-dialog>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<!--        批量删除-->
	        <el-button type="danger" icon="el-icon-delete" @click="deleteIds" plain>删除</el-button>
			
			<!-- <el-button type="success" plain style="float: right;margin-right: 100px;" @click="saveUpdate">保存</el-button> -->
	
	    </div>
	
	<!-- 表格 -->
	    <div>
	        <el-table
	                ref="multipleTable"
	                tooltip-effect="dark"
	                @selection-change="handleSelectionChange"
	
	                :data="tableData"
	                stripe
	                style="width: 100%">
	            <el-table-column
	                    type="selection"
	                    width="55">
	            </el-table-column>
	            <el-table-column
	                    prop="id"
	                    label="编号"
	                    width="180">
	            </el-table-column>
	            <el-table-column
	                    prop="name"
	                    label="客户名称"
	                    width="180">
	            </el-table-column>
				<el-table-column
				        prop="contact"
				        label="联系人"
				        width="180">
				</el-table-column>
				<el-table-column
				        prop="number"
				        label="联系电话"
				        width="180">
				</el-table-column>
				<el-table-column
				        prop="address"
				        label="联系地址"
				        width="180">
				</el-table-column>
				<el-table-column
				        prop="remarks"
				        label="备注"
				        width="180">
				</el-table-column>
	            <el-table-column
	                    label="操作">
	                <template slot-scope="scope">
	                    <el-button type="primary" @click="openUpdate(scope.row)" plain>修改</el-button>
	                    <!-- 点击修改弹框，带有默认值-->
	                    <el-dialog title="修改" :visible.sync="dialogUpdate" width="30%">
	                        <el-form  :model="customer" label-width="80px">
	                            <el-form-item label="编号:">
	                                <el-input v-model="customer.id" readonly></el-input>
	                            </el-form-item>
	                            <el-form-item label="客户名称:">
	                                <el-input v-model="customer.name" ></el-input>
	                            </el-form-item>
								<el-form-item label="联系人:">
								    <el-input v-model="customer.contact" ></el-input>
								</el-form-item>
								<el-form-item label="联系电话:">
								    <el-input v-model="customer.number" ></el-input>
								</el-form-item>
								<el-form-item label="联系地址:">
								    <el-input v-model="customer.address" ></el-input>
								</el-form-item>
								<el-form-item label="备注:">
								    <el-input v-model="customer.remarks" ></el-input>
								</el-form-item>
	                        </el-form>
	                        <span slot="footer" class="dialog-footer">
	                            <el-button @click="dialogUpdate = false">取 消</el-button>
	                            <el-button type="primary" @click="ofUpdate">确 定</el-button>
	                        </span>
	                    </el-dialog>
	
	                    <el-button type="danger" @click="openDelete(scope.row.id)" plain>删除</el-button>
	                </template>
	            </el-table-column>
	        </el-table>
	    </div>
	
	    <div class="block">
	        <el-pagination
	                @size-change="handleSizeChange"
	                @current-change="handleCurrentChange"
	                :current-page="queryCustomerVo.currentPage"
	                :page-sizes="[3, 5, 10, 20]"
	                :page-size="queryCustomerVo.sizePage"
	                layout="total, sizes, prev, pager, next, jumper"
	                :total="total">
	        </el-pagination>
	    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//表格中的数据，有后端传值
				tableData: [],
				//queryCustomerVo后端接收对象
				queryCustomerVo: {
					name:'',
					currentPage: 1,
					sizePage: 3,
				},
				//总记录数
				total: 20,
				//供应商对象
				customer: {
					id: '',
					address: '',
					contact: '',
					name: '',
					number: '',
					remarks:'',
				},
				//搜索输入框
				input: '',
				//搜索下拉列表
				select: '',
				//关于新增弹框属性，true打开，false关闭
				dialogVisible: false,
				//修改弹窗属性
				dialogUpdate: false,
				//关于批量删除的id
				ids: [],
			}
		},
		methods:{
			//页面加载完后调用的方法
			queryDate(){
				this.postRequest('/customer/likeQuery',this.queryCustomerVo).then(result=> {
					this.tableData=result.data.list;
					this.total=result.data.total;
				})
			},
			monitorContent(){
				
			},
			//模糊查询
			fuzzySearch(){
				if(this.select == 1) {
					this.queryCustomerVo.name=this.input;
				}
				this.queryDate();
			},
			//打开添加弹窗
			ofOpenAdd(){
				this.dialogVisible=true;
				//清除默认值
				this.customer.id='';
				this.customer.address='';
				this.customer.contact='';
				this.customer.name='';
				this.customer.number='';
				this.customer.remarks='';
			},
			//点击确定添加一条新记录
			openAdd(){
				//关闭弹窗
				this.dialogVisible=false;
				this.postRequest('/customer/save',this.customer).then(result=> {
					this.queryDate();
				});
			},
			//复选框获取id，用于批量删除
			handleSelectionChange(val){
				var idm = [];
				for(let customer of val){
					idm.push(customer.id);
				}
				this.ids = idm;
			},
			//打开修改弹窗，赋予默认值
			openUpdate(row){
				//打开弹窗
				this.dialogUpdate=true;
				//赋值
				this.customer.id=row.id;
				this.customer.name=row.name;
				this.customer.contact=row.contact;
				this.customer.number=row.number;
				this.customer.address=row.address;
				this.customer.remarks=row.remarks;
			},
			//点击确定修改一条记录
			ofUpdate(){
				//点击确定，关闭弹窗
				this.dialogUpdate=false;
				this.postRequest('/customer/update',this.customer).then(result=> {
					this.queryDate();
				});
			},
			//单个删除
			openDelete(id) {
				this.$confirm('删吗？删吗？', '提示', {
					confirmButtonText: '删吧删吧',
					concelButtonText: '算了算了',
					type: 'warning'
				}).then(() => {
					console.log(id);
					this.deleteRequest('/customer/delOne/'+id).then(result=>{
						if(this.total%this.queryCustomerVo.sizePage === 1){
							this.queryCustomerVo.currentPage--;
						}
						this.queryDate();
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//批量删除
			deleteIds() {
			    this.$confirm('删除，确定?', '提示', {
			        confirmButtonText: '删了删了',
			        cancelButtonText: '算了算了',
			        type: 'warning'
			    }).then(() => {
			        if (this.ids.length != 0) {
						this.deleteRequest('/customer/delBatch',this.ids).then(result=> {
							if(this.ids.length === this.tableData.length) {
								this.queryCustomerVo.currentPage--;
							}
							this.queryDate();
						})
			        } else {
			            this.$message({
			                type: 'info',
			                message: '无选中记录！'
			            });
			        }
			    }).catch(() => {
			        this.$message({
			            type: 'info',
			            message: '已取消删除'
			        });
			    });
			},
			//关于分页
			handleSizeChange(val){
				this.queryCustomerVo.sizePage=val;
				this.queryDate()
			},
			handleCurrentChange(val){
				this.queryCustomerVo.currentPage=val;
				this.queryDate();
			},
		},
		mounted(){
			 this.queryDate();
		},
		filters: {
			
		}
	}
</script>

<style>
	.el-select .el-input {
	    width: 130px;
	}
	.input-with-select .el-input-group__prepend {
	    background-color: #fff;
	}
</style>
